<template>
  <div
    class="video-stats-item"
    v-for="(item, index) in videoStatsList"
    :key="index"
  >
    <div class="video-stats-header">
      <div v-if="item.thumbnail" class="img-body">
        <img :src="item.thumbnail" alt="视频缩略图" class="thumbnail" />
      </div>
      <div v-else class="img-body">
        <img
          src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngccea4af5424f95835b5e444e8693707d8ee1ee623655733994702a8e0781bb1d?noCache=true"
          alt="默认视频缩略图"
          class="thumbnail-default"
        />
      </div>
      <div class="stats-info">
        <div class="stat-item">
          <span class="title">播放量</span>
          <span class="stat-value">{{ item.playCount }}</span>
        </div>
        <div class="stat-item">
          <span>点赞量</span>
          <span class="stat-value">{{ item.likeCount }}</span>
        </div>
        <div class="stat-item">
          <span>评论量</span>
          <span class="stat-value">{{ item.commentCount }}</span>
        </div>
        <div class="stat-item">
          <span>7日播放量</span>
          <div class="stat-value-sevenDayPlayCount">
            <div class="sevenDayPlayCount">{{ item.sevenDayPlayCount }}</div>
            <div
              :id="`table-chart-video-${index}`"
              style="
                width: 107px;
                height: 35px;
                display: inline-block;
                margin-top: 8px;
              "
            ></div>
          </div>
        </div>
      </div>
      <div class="publish-time">{{ item.publishTime }}</div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from "vue"
import * as echarts from "echarts"
// 模拟数据
const videoStatsList = [
  {
    thumbnail: "", // 可传入实际缩略图地址，这里为空表示用默认
    playCount: 34,
    likeCount: 34,
    commentCount: 34,
    sevenDayPlayCount: 34,
    publishTime: "2025-01-10 10:34发布",
  },
  {
    thumbnail:
      "https://lanhu-oss-2537-2.lanhuapp.com/SketchPng26a3d2709dd1558841e075f90d6fa2740ca3b6a1e1cbe2f0b923c55bb7756874?noCache=true", // 示例缩略图路径，可按需修改
    playCount: 34,
    likeCount: 34,
    commentCount: 34,
    sevenDayPlayCount: 34,
    publishTime: "2025-01-10 10:34发布",
  },
]
let resizeTimer
onMounted(() => {
  const myChart = echarts.init(document.getElementById("table-chart-video-0"))
  const myChart1 = echarts.init(document.getElementById("table-chart-video-1"))

  const option = {
    animation: true,
    animationDuration: 1000, // 动画持续时间（毫秒）
    animationEasing: "cubicOut", // 动画缓动效果
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["00:00", "06:00", "12:00", "18:00", "24:00"],
      axisLine: {
        show: false, // 隐藏x轴最底部线条
      },
      axisTick: {
        show: false, // 隐藏刻度线（指向标线）
      },
      axisLabel: {
        show: false, // 隐藏轴标签（数据）
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        type: "line",
        data: [10, 8, 7, 12, 15], // 示例数据，可按需替换
        lineStyle: {
          color: "#E972A4",
          width: 2,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(233, 114, 164, 0.2)" },
            { offset: 1, color: "rgba(233, 114, 164, 0)" },
          ]),
        },
        symbol: "none",
      },
    ],
  }

  myChart.setOption(option)
  myChart1.setOption(option)

  const resizeHandler = () => {
    // 清除之前的定时器
    if (resizeTimer) {
      clearTimeout(resizeTimer)
    }
    // 设置新的定时器
    resizeTimer = setTimeout(() => {
      myChart.resize()
      myChart1.resize()
    }, 500)
  }
  window.addEventListener("resize", resizeHandler)

  onUnmounted(() => {
    window.removeEventListener("resize", resizeHandler)
    myChart.dispose()
    myChart1.dispose()
    // 清除可能存在的定时器
    if (resizeTimer) {
      clearTimeout(resizeTimer)
    }
  })
})
</script>

<style scoped>
.video-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.video-stats-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 15px 0 15px 0;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.video-stats-item:last-child {
  border-bottom: 0;
}
.img-body {
  width: 100px;
  height: 64px;
  position: relative;
  margin-right: 42px;
}
.thumbnail,
.thumbnail-default {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.thumbnail-default {
  width: 58px;
  height: 74px;
  object-fit: contain;
}
.stats-info {
  display: flex;
}

.stat-item {
  /* margin-bottom: 5px; */
  margin-right: 108px;
}

.stat-item span {
  display: block;
}
.stat-item .title {
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 20px;
  text-align: left;
  font-style: normal;
}

.stat-value,
.sevenDayPlayCount {
  height: 30px;
  font-family: AlibabaSans102Dec10, AlibabaSans102Dec10;
  font-weight: bold;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 30px;
  text-align: left;
  font-style: normal;
  margin-top: 6px;
}

.seven-day-chart {
  margin-left: 10px;
}

.publish-time {
  flex: 1;
  text-align: right;
  width: 125px;
  height: 20px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
  text-align: right;
  font-style: normal;
}
.stat-value-sevenDayPlayCount {
  display: flex;
}
.sevenDayPlayCount {
  height: 30px;
  font-family: AlibabaSans102Dec10, AlibabaSans102Dec10;
  font-weight: bold;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.85) !important;
  line-height: 30px;
  text-align: left;
  font-style: normal;
  margin-right: 18px !important;
  margin-top: 6px;
}
</style>
